<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :xl="5" :lg="7" :md="8" :sm="24">
                        <a-form-item label="单据编号">
                            <a-input placeholder="请输入" v-model="queryParam.billNo" />
                        </a-form-item>
                    </a-col>
                    <a-col :xl="5" :lg="7" :md="8" :sm="24">
                        <a-form-model-item label="单据日期" :labelCol="{ span: 8 }" :wrapperCol="{ span: 10 }"
                            prop="billDate">
                            <!--JDate 清空或键盘删空，即使输入了合法日期，必填校验提示仍一直显示，故设置allowClear=false和inputReadOnly=true-->
                            <j-date v-model="queryParam.billDate" placeholder="请选择日期" style="width: 100%"
                                :allowClear="false" :inputReadOnly="true" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :xl="5" :lg="7" :md="8" :sm="24">
                        <a-form-model-item label="业务员" :labelCol="{ span: 8 }" :wrapperCol="{ span: 10 }"
                            prop="operator" ref="operatorFmi">
                            <j-select-user-by-dep v-model="queryParam.operator" :multi="false" />
                        </a-form-model-item>
                    </a-col>
                    <template v-if="toggleSearchStatus">

                    </template>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                            <a @click="handleToggleSearch" style="margin-left: 8px">
                                {{ toggleSearchStatus ? '收起' : '展开' }}
                                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                            </a>
                        </span>
                    </a-col>

                </a-row>
            </a-form>
        </div>
        <!-- 查询区域-END -->

        <!-- 操作按钮区域 -->
        <div class="table-operator">
            <a-button type="link" @click="myHandleAdd()" icon="plus">新增</a-button>
            <!--    <a-button type="link" icon="download" @click="handleExportXls('销售订单')">导出</a-button>
            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
                :action="importExcelUrl" @change="handleImportExcel">
                <a-button type="link" icon="import">导入</a-button>
            </a-upload> -->
            <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                    <a-menu-item key="1" @click="batchDel()">删除</a-menu-item>
                </a-menu>
                <a-button type="link" style="margin-left: 8px">批量操作<a-icon type="down" /></a-button>
            </a-dropdown>
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
                selectedRowKeys.length }}</a>项
            <a v-if="selectedRowKeys.length > 0" style="margin-left: 12px" @click="onClearSelected">清空</a>

            <table-columns-setter v-model="columns" style="float: right;" />
        </div>

        <!-- table区域-begin -->
        <div>
            <a-table ref="table" size="middle" bordered rowKey="id" :scroll="{ x: true }" :columns="columns"
                :dataSource="dataSource" :pagination="ipagination" :loading="loading"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                class="j-table-force-nowrap" :components="drag(columns)" @change="handleTableChange">
                <template #voidedTag="text, record">
                    <!-- 使用你的自定义dictTag组件，传递cellValue -->
                    <j-vxe-dict-tag :cell-value="record.status" />
                </template>
                <a slot="billNo" @click="myHandleDetail(record)" slot-scope="text, record">{{ text }}</a>

                <span slot="action" slot-scope="text, record">

                    <a @click="myHandleDetail(record)">详情</a>
                    <a-divider type="vertical" />
                    <a-dropdown>
                        <!--  '0': '草稿',
                               '1': '生产中',
                                '2': '待质检',
                               '3': '待发货'
 -->
                        <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                        <a-menu slot="overlay">
                            <a-menu-item key="1">
                                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                                    <a>删除</a>
                                </a-popconfirm>
                            </a-menu-item>
                            <a-menu-item v-if="record.status == '0'" key="2"
                                @click="myhandleCheck(record)">提交</a-menu-item>
                            <a-menu-item key="3" @click="myHandleEdit(record)"
                                v-if="record.status == '0'">编辑</a-menu-item>
                            <a-menu-item key="4" v-if="record.status == '3'"
                                @click="HandleDispatch(record)">发货</a-menu-item>
                            <a-menu-item key="5" @click="Handlepayment(record)">收款</a-menu-item>

                        </a-menu>
                    </a-dropdown>
                </span>

            </a-table>
        </div>

        <order-modal ref="modalForm" @ok="modalFormOk" @refreshs="loadListData" />

        <!-- 发货弹窗 -->
        <a-modal title="发货信息" :visible="dispatchModalVisible" @ok="handleDispatchOk" @cancel="handleDispatchCancel"
            okText="确定" cancelText="关闭">
            <a-form layout="vertical">
                <a-form-item label="是否海运">
                    <a-select v-model="dispatchForm.transportOceanFlag" placeholder="请选择">
                        <a-select-option value="1">海运</a-select-option>
                        <a-select-option value="0">非海运</a-select-option>
                    </a-select>
                </a-form-item>

                <template v-if="dispatchForm.transportOceanFlag === '1'">
                    <a-form-item label="运输附件">
                        <j-upload v-model="dispatchForm.transportAttachment"></j-upload>

                    </a-form-item>
                    <a-form-item label="运输备注">
                        <el-input v-model="dispatchForm.transportRemark" placeholder="请输入" type="textarea"
                            rows="2"></el-input>
                    </a-form-item>
                </template>
            </a-form>
        </a-modal>
    </a-card>
</template>

<script>
import JVxeDictTag from '@/components/jeecg/JVxeTable/components/cells/JVxeDictTagCell.vue' // 路径替换为你的组件实际路径
// import { OrderFormGridMixin, OrderFormMixin } from '../common/mixins/OrderFormMixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { postAction } from '@/api/manage'
import orderModal from './modules/OrderModal'
import TableColumnsSetter from '../common/components/TableColumnsSetter'
// import { ListMixin } from '../common/mixins/ListMixin'
import XEUtils from "xe-utils";
import { OrderListMixin } from '../common/mixins/OrderListMixin'
export default {
    name: "ProductManagement",
    mixins: [JeecgListMixin, OrderListMixin,],
    components: { TableColumnsSetter, orderModal, JVxeDictTag },

    data() {
        return {
            description: '销售订单',
            billReportId: '731513187758551040',
            queryParam: {
                billNo: "",
                billDate: "",
                operator: "",
            },

            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    fixed: 'left',
                    width: 40,
                    align: "center",
                    customRender: (t, r, index) => parseInt(index) + 1
                },
                {
                    title: '单据编号',
                    fixed: 'left',
                    width: 160,
                    align: "center",
                    dataIndex: 'billNo',
                    scopedSlots: { customRender: 'billNo' },
                    sorter: true
                },
                {
                    title: '单据日期',
                    width: 160,
                    align: "center",
                    dataIndex: 'billDate',
                    customRender: t => !t ? "" : (t.length > 10 ? t.substr(0, 10) : t),
                },
                {
                    title: '客户',
                    align: "center",
                    width: 160,
                    dataIndex: 'customerId_dictText',
                    ellipsis: true,
                },
                {
                    title: '联系人',
                    align: "center",
                    width: 160,
                    dataIndex: 'contact',
                    ellipsis: true,
                },

                {
                    title: '联系电话',
                    align: "center",
                    width: 160,
                    dataIndex: 'phone',
                    ellipsis: true,
                },

                {
                    title: '电子邮件',
                    align: "center",
                    dataIndex: 'email',
                    ellipsis: true,
                },
                /*  {
                     title: '业务部门',
                     align: "center",
                     width: 160,
                     dataIndex: 'opDept',
                     ellipsis: true,
                 }, */
                {
                    title: '业务员',
                    align: "center",
                    width: 160,
                    dataIndex: 'operator',
                    ellipsis: true,
                },
                {
                    title: '订单总金额',
                    align: "center",
                    width: 160,
                    dataIndex: 'totalAmt',
                    ellipsis: true,
                },
                {
                    title: '订单总应付款金额',
                    align: "center",
                    width: 160,
                    dataIndex: 'totalPayAmount',
                    ellipsis: true,
                },
                {
                    title: '已结算金额',
                    align: "center",
                    width: 160,
                    dataIndex: 'settledAmt',
                    ellipsis: true,
                },
                {
                    title: '已支付金额',
                    align: "center",
                    width: 160,
                    dataIndex: 'payedAmount',
                    ellipsis: true,
                },
                {
                    title: '订单状态',
                    align: "center",
                    width: 160,
                    dataIndex: 'status',
                    ellipsis: true,
                    ellipsis: true,
                    // 添加自定义渲染插槽
                    scopedSlots: {
                        customRender: 'voidedTag' // 对应模板中的 #voidedTag 插槽
                    }
                },

                {
                    title: '操作',
                    dataIndex: 'action',
                    fixed: 'right',
                    width: 120,
                    align: "center",
                    scopedSlots: {
                        filterDropdown: 'filterDropdown',
                        filterIcon: 'filterIcon',
                        customRender: 'action'
                    },
                }
            ],
            url: {
                list: "/wr/salOrderWr/list",
                delete: "/wr/salOrderWr/delete",
                deleteBatch: "/wr/salOrderWr/deleteBatch",
                // exportXlsUrl: "/base/basProduct/exportXls",
                // importExcelUrl: "/base/basProduct/importExcel",
            },
            dictOptions: {},
            dispatchModalVisible: false,
            dispatchForm: {
                transportOceanFlag: '',
                transportAttachment: '',
                transportRemark: ''
            },
            currentRecord: null
        }
    },

    methods: {
        initDictConfig() { },
        loadListData() {
            this.searchQuery()
            console.log('loadListData调用成功');
        },

        // 处理发货
        HandleDispatch(record) {
            this.currentRecord = record;
            // 重置表单
            this.dispatchForm = {
                transportOceanFlag: '',
                transportAttachment: '',
                transportRemark: ''
            };
            // 显示弹窗
            this.dispatchModalVisible = true;
        },

        // 发货弹窗确定按钮
        handleDispatchOk() {
            // 打印三个字段信息
            console.log('发货信息:', this.dispatchForm);
            // 关闭弹窗
            this.dispatchModalVisible = false;

            postAction('/wr/salOrderWr/deliver', this.dispatchForm).then(res => {
                console.log('发货的res', res);
                // this.productOptions = res.result.productList;
                if (res.code == 200) {
                    this.$message.success(res.message);
                }
            });
            // 可以在这里添加实际的发货逻辑
            // this.$message.success('发货成功');
             this.searchQuery()
        },
        Handlepayment(value) {
            postAction('/wr/salOrderWr/receivePayment', { id: value.id }).then(res => {
                console.log('收款的res', res);
                // this.productOptions = res.result.productList;
                if (res.code == 200) {
                    this.$message.success(res.message);
                }
            });
             this.searchQuery()
        },
        // 发货弹窗关闭按钮
        handleDispatchCancel() {
            this.dispatchModalVisible = false;
        },

        // 处理上传文件变化
        handleUploadChange(info) {
            if (info.file.status === 'done') {
                if (info.file.response.success) {
                    // 保存文件路径
                    this.dispatchForm.transportAttachment = info.file.response.message;
                    this.$message.success('上传成功');
                } else {
                    this.$message.error('上传失败');
                }
            } else if (info.file.status === 'error') {
                this.$message.error('上传失败');
            }
        }
    }

}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '../common/less/List.less';
</style>
